<template>
    <div class="form-group">
        <p class="cut_off"></p>
		<table width="100%" border="0" class="form-table">
			<thead>
				<tr>
					<th>排名</th>
					<th>姓名</th>
					<th>分数</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="rank of countryRankList0" :class="{fc_red:rank.isThis}">
					<td>{{rank.rank}}</td>
					<td>{{rank.empName}}</td>
					<td>{{rank.score}}</td>
				</tr>
			</tbody>
		</table>
		<div class="text_center" @click="getPageDown" v-if = "hasNextPage">下一页</div>
		<loading v-if="loadShow"></loading>
		<div class="no_data" v-if="hasNoData">
			<i class="ion ion-ios-paper-outline"></i>
			<p>暂无数据</p>
		</div>
	</div>	

</template>
<script type="text/javascript">
    import loading from '../../widget/loading.vue'
	export default{
		data(){
			return{
				countryRankList0:[],
				currentPage:1,
				hasNextPage:true,
				loadShow:true,
				hasNoData:false
			}

		},
		mounted(){
			this.getTeamRankDatas();
		},
		components:{
			loading
		},
		methods:{
			getTeamRankDatas(){
				this.$http.post(this.$parent.countryListRankUrl+'&page='+this.currentPage,{emulateJSON:true,before(){
			          // 显示正在加载提示框
			          this.loadShow = true;
			    }})
				.then((response) =>{
					console.log(response);
					
					if(response.data != null){
						this.countryRankList0 = response.data[0].ipList;
						this.page = response.data[0].page;
						if(this.page <= this.currentPage){
							this.hasNextPage = false;
						}
					}else{
						this.hasNoData = true;
					}
				}).finally(() => {
		          // 隐藏正在加载提示框
		          this.loadShow = false;
		        });
			},
			getPageDown(){
				this.loadShow = true;
				if(this.hasNextPage){
					this.currentPage++;
					if(this.page <= this.currentPage){
						this.hasNextPage = false;
					}
					this.$http.post(this.$parent.countryListRankUrl+'&page='+this.currentPage,{emulateJSON:true,before(){
			            // 显示正在加载提示框
			            this.loadShow = true;
				    }})
					.then((response) =>{					
						if(response.data[0].ipList != null){
							this.countryRankList0 = this.countryRankList0.concat(response.data[0].ipList);
						}
					}).finally(() => {
			          // 隐藏正在加载提示框
			          this.loadShow = false;
			        });
				}				
			}
		}
	}
</script>